<template>
  <div id="mapContainer"></div>
  <el-drawer v-model="drawerVisible" :title="currentItem.name">
    <div class="room-info">
      <div class="info-item">
        <div class="label">建面</div>
        <div class="content">暂无</div>
      </div>
      <div class="info-item">
        <div class="label">均价</div>
        <div class="content">{{ currentItem.unitPrice }}</div>
      </div>
      <div class="info-item">
        <div class="label">详情</div>
        <div class="content">{{ currentItem.content }}</div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import RoomData from '@/assets/roomData'

let map: any = null
const drawerVisible = ref(false)
const currentItem = reactive<Record<string, string | number | number[]>>({})

onMounted(() => {
  AMapLoader.load({
    key: '631559fdba0d8db5c5efc8885ca5bdc8', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((Amap) => {
      map = new Amap.Map('mapContainer', {
        // 设置地图容器id
        zoom: 11, // 初始化地图级别
        center: [114.317531, 30.52863] // 初始化地图中心点位置
      })

      RoomData.forEach((item) => {
        addMarker(Amap, item)
      })
    })
    .catch((e) => {
      console.log(e)
    })
})

function addMarker(AMap: any, item: Record<string, string | number | number[]>) {
  // 创建点覆盖物
  const position = item.position as number[]
  const marker = new AMap.Marker({
    position: new AMap.LngLat(position[0], position[1]),
    content: '<div class="marker-icon"></div>',
    offset: new AMap.Pixel(-4, -4), //相对于基点的偏移位置
    extData: { item },
    label: {
      direction: 'top',
      content: `<div class="marker-item">${item.name} ${item.unitPrice}</div>`
    }
  })
  map.add(marker)
  marker.on('click', (e: any) => {
    const data = e.target.getExtData().item
    Object.assign(currentItem, data)
    drawerVisible.value = true
  })
}

onUnmounted(() => {
  map?.destroy()
})
</script>
<style lang="scss" scoped>
#mapContainer {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  :deep() .amap-markers {
    .amap-marker-label {
      background-color: transparent;
      border: none;
      padding: 0;
    }
    .marker-icon {
      border: 4px solid transparent;
      border-top-color: #3072f6;
      display: block;
      width: 0;
      height: 0;
      transition: all 0.15s ease-in-out;
    }
    .marker-item {
      padding: 8px 12px;
      color: #fff;
      border-radius: 15px;
      font-family: '微软雅黑';
      font-size: 12px;
      letter-spacing: 0;
      height: 31px;
      line-height: 15px;
      background: #3072f6;
    }
  }
}
.room-info {
  .info-item {
    display: flex;
    padding-bottom: 10px;
    .label {
      width: 50px;
    }
    .content {
      flex: 1;
    }
  }
}
</style>
<style lang="scss">
.el-drawer__header {
  border-bottom: #dcdef6 solid 1px;
  margin-bottom: 0;
  padding-bottom: 10px;
  .el-drawer__title {
    font-weight: 600;
  }
}
</style>
